<template>
    <div>
        <div style="width: 100vw;height: 100vh;position: relative;">
            <div class="bigMap" id="amp-part"></div>
            <div class="header">
                <div class="map_header">
                    <div class="map_header_left">{{ dayweather }} {{ daytemp }}℃</div>
                    <div class="map_header_center">贞一环境智慧运管中心</div>
                    <div class="map_header_rihgt">
                        <span>{{ dateFormat(date) }} </span>
                        <img style="width: 30px;height: 30px;" src="../imgUrl/mapOut.png" alt="">
                        <span @click="closeFun" style="font-size: 26px;padding: 0 10px;">关闭</span>
                    </div>
                </div>
            </div>
            <div class="left">
                <div class="map_center_left">
                    <div class="mapleft">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapleft.png" alt="">
                    </div>
                    <div style="padding-left: 33px;">
                        <div class="mapleft_card ">
                            <div class="maptitle">设备总览</div>
                            <div class="mapleft1">
                                <div class="pieChar">
                                    <PieMapChart :pieData="isForm"></PieMapChart>
                                </div>
                                <div class="mapleft1_sticit">
                                    <div class="sticit_header">安全生产
                                        <div class="header_num" :key="index" v-for="(item, index) of dayData">{{ item }}
                                        </div>
                                        天
                                    </div>
                                    <div class="sticit_number">
                                        <div style="text-align: center;color: #00C8FF;">
                                            <div class="sticit_number1">
                                                {{ isForm.normalData }}
                                            </div>
                                            <div class="sticit_text" style="">正常设备</div>
                                        </div>
                                        <div style="text-align: center;color: #FF002E;">
                                            <div class="sticit_number2">
                                                {{ isForm.forewarningData }}
                                            </div>
                                            <div class="sticit_text">预警设备</div>
                                        </div>
                                        <div style="text-align: center;color: #AFCFFF;">
                                            <div class="sticit_number3">
                                                {{ isForm.offlineData }}
                                            </div>
                                            <div class="sticit_text">离线设备</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mapleft_card">
                            <div class="maptitle">告警统计</div>
                            <div>
                                <barMapChart :height="'20vh'"></barMapChart>
                            </div>
                        </div>
                        <div class="mapleft_card">
                            <div class="maptitle">实时告警</div>
                            <div class="maptable_list auto-scroll-row">
                                <div class="maptable_li" style="text-align: left;">战点名称</div>
                                <div class="maptable_li" style="text-align:center;">告警类型</div>
                                <div class="maptable_li" style="text-align: center;">告警时间</div>
                                <div class="maptable_li" style="text-align: right;">设备状态</div>
                            </div>
                            <div class="maptable">
                                <autoScroll :step="1" :period="100" :cycle="true" :resume-smooth="true">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspection">
                                        <div class="maptable_li" style="text-align: left;">{{ item.name }}</div>
                                        <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                        <div class="maptable_li" style="text-align: center;">{{ item.remerk }}</div>
                                        <div class="maptable_li" style="text-align: right;">{{ item.remerk }}</div>
                                    </div>
                                </autoScroll>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="map_center_right">
                    <div style="padding-right: 25px;">
                        <div class="mapRight_card">
                            <div class="maptitle">能耗监控</div>
                            <div class="mapRight_cardFlex">
                                <div class="cardFlex_img">
                                    <div class="cardFlex_text">今日耗电量</div>
                                    <div class="cardFlex_num">
                                        0
                                    </div>
                                </div>
                                <div class="cardFlex_img">
                                    <div class="cardFlex_text">今日进水量</div>
                                    <div class="cardFlex_num">0</div>
                                </div>
                                <div class="cardFlex_img">
                                    <div class="cardFlex_text">今日处理量</div>
                                    <div class="cardFlex_num">0</div>
                                </div>
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">能耗统计</div>
                            <div>
                                <lineAndebarMapChart :height="'20vh'"></lineAndebarMapChart>
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">能耗监控</div>
                            <div>
                                <barMapGeeChart :height="'20vh'" />
                            </div>
                        </div>
                    </div>
                    <div class="mapRight">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapright.png" alt="">
                    </div>
                </div>
            </div>
            <div class="food">
                <div class="map_food">
                    <div class="map_food_btn" @click="mapFoodBtn(1)">地图总览</div>
                    <div class="map_food_btn" @click="mapFoodBtn(2)">设备管理</div>
                    <div class="map_food_btn" @click="mapFoodBtn(3)">数据分析</div>
                </div>
            </div>
        </div>

        <el-dialog style="background-color: transparent !important;" :visible.sync="isOpen" append-to-body>
            <div style="display: flex;width: 250px;margin: auto;background-color: #00C8FF;">
                <div style="width: 80px;">
                    <img src="" alt="">
                </div>
                <div style="width: 120px;color: white;">
                    <div>公司东莞市</div>
                    <div>公司东莞市</div>
                    <div>公司东莞市</div>
                    <div>公司东莞市</div>
                </div>
            </div>
            <!-- <div slot="footer" style="text-align: center;">
                <el-button @click="isOpen = false">关 闭</el-button>
            </div> -->
        </el-dialog>
    </div>
</template>

<script>
import { listDeviceShort } from '@/api/iot/device';
import PieMapChart from './components/PieMapChart.vue'
import MapChart from './components/MapChart.vue'
import barMapChart from './components/barMapChart.vue'
import lineAndebarMapChart from './components/lineAndebarMapChart.vue'
import barMapGeeChart from './components/barMapGeeChart.vue'
import axios from 'axios'
import autoScroll from 'vue-list-auto-scroll-tsc'
export default {
    components: {
        PieMapChart,
        MapChart,
        autoScroll,
        barMapChart,
        lineAndebarMapChart,
        barMapGeeChart,
    },
    data() {
        return {
            Weather: "",
            map: '',
            markList: [],
            partyRedIcon: new AMap.Icon({
                size: new AMap.Size(23, 34),    // 图标尺寸
                image: 'http://zyhjxy.cn/profile/iot/1/2025-0402-140719.png',  // Icon的图像
                imageSize: new AMap.Size(23, 34)   // 根据所设置的大小拉伸或压缩图片
            }),
            dayweather: '',
            daytemp: '',
            date: new Date(),
            dayData: '0',
            isForm: {
                normalData: 0,
                forewarningData: 0,
                offlineData: 0
            },
            mapInspection: [],
            isOpen: false,
        };
    },
    created() {
        this.daysUntil();
        this.deviceListFun();
    },
    mounted() {
        this.init();
    },
    watch: {},
    methods: {

        //初始化地图
        setMapOption() {
            let _this = this;
            this.map = new AMap.Map('amp-part', {
                mapStyle: 'amap://styles/darkblue',
                viewMode: '3D',
                pitch: 30,//倾斜角度
                zoom: 14,
                center: [114.128557, 32.100615],//中心点坐标
                zoomEnable: true,
                dragEnable: true,
            });
            AMap.plugin('AMap.Weather', function () {
                var weather = new AMap.Weather();
                //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
                weather.getLive('平桥区', function (err, data) {
                    if (!err) {
                        _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                        _this.daytemp = data.temperature
                    }
                });
            })
            this.setTages([{
                longitude: '114.128557',
                latitude: '32.100615',
                communityName: '甘南站',
                communityId: '1'
            }], this.map)
        },
        setTages(arry, map) {
            let _this = this;
            map.remove(this.markList)
            this.markList = []
            arry.map(ele => {

                let iconType = this.partyRedIcon
                let marker = new AMap.Marker({
                    position: new AMap.LngLat(ele.longitude, ele.latitude),
                    icon: iconType
                });
                marker.setLabel({
                    direction: 'center',
                    offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
                    content: `<div class='info' style='overflow:auto;color: gold;background-color: transparent;'>${ele.communityName}</div>`, //设置文本标注内容
                });
                marker.on('click', (e) => {
                    // console.log(ele.communityId);
                    // _this.isOpen = true
                });
                this.markList.push(marker)
                map.add(marker);
            })
            let Array = [0, 0, 0, 0]
            // if (this.markList.length == 1) {
            //     Array = [0, 0, 0, 0]
            // } else {
            //     Array = [0, 0, 0, -600]
            // }
            map.setFitView(this.marker, true, Array);
        },
        init() {
            this.setMapOption();
        },
        dateFormat(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds;
        },
        closeFun() {
            window.close();
        },
        mapFoodBtn(type) {
            this.$emit('success1', {
                type: type
            })
        },
        daysUntil() {
            let today = new Date();
            let endDate = new Date('2024-12-01T00:00:00')
            const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
            let isData = Math.round(Math.abs((endDate - today) / oneDay));
            this.dayData = isData + ''
        },
        /** 查询所有简短设备列表 */
        deviceListFun() {
            let params = {
                pageSize: 999,
                pageNum: 1,
            }
            listDeviceShort(params).then((response) => {
                let deviceList = response.rows;
                this.isForm.normalData = deviceList.length;
            });
        },
    },

};
</script>
<style lang="scss" scoped>
.bigMap {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
}

.header {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 20vh;
}

.left {
    position: absolute;
    left: 0;
    top: 11vh;
    width: 26vw;
    height: 80vh;
}

.right {
    position: absolute;
    right: 0;
    top: 11vh;
    width: 26vw;
    height: 80vh;
}

.food {
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 10vh;
}

.map_header {
    width: 100vw;
    height: 20vh;
    background-image: url(../imgUrl/mapheader.png);
    background-size: 100% 100%;
    transform-origin: 0% 0%;
    color: white;
    position: relative;

    .map_header_left {
        padding-left: 30px;
        padding-top: 41px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 26px;
        color: #a3b1b8;
        line-height: 38px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        position: absolute;
        left: 0;
        top: 0;
    }

    .map_header_center {
        flex: 1;
        text-align: center;
        padding-top: 36px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 800;
        font-size: 40px;
        color: #FFFFFF;
        line-height: 59px;
    }

    .map_header_rihgt {
        text-align: right;
        padding-right: 20px;
        padding-top: 41px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 26px;
        color: #a3b1b8;
        line-height: 38px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        position: absolute;
        right: 20px;
        top: 0;
    }
}

.map_food {
    width: 100vw;
    height: 10vh;
    background-image: url(../imgUrl/mapfood.png);
    // margin-top: -45px;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;

    .map_food_btn {
        background-image: url(../imgUrl/mapfoodbtn.png);
        background-size: 100% 100%;
        width: 143px;
        height: 52px;
        color: white;
        text-align: center;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 20px;
        line-height: 52px;
        letter-spacing: 1px;
        text-shadow: 0px 3px 10px #0032B2;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-right: 12px;
        margin-top: -30px;
        display: inline-block;
        cursor: pointer;
    }
}

.map_center_left {
    display: flex;

    .mapleft {
        width: 33.5px;
    }

    .mapleft_card {
        width: 23vw;
        height: 24.5vh;
        background-image: url(../imgUrl/mapcard.png);
        background-size: 100% 100%;
        margin-bottom: 20px;

        .maptable {
            width: 96%;
            height: 18vh;
            padding: 10px 0;
            overflow: hidden;
            text-align: center;
            margin: 0px auto;

            ::-webkit-scrollbar {
                display: none;
            }


        }

        .maptable_list {
            display: flex;
            width: 100%;
            height: 26px;
            font-size: 14px;
            background: rgba(0, 163, 255, 0.3);
            border-radius: 0px 0px 0px 0px;
            color: rgba(255, 255, 255, 1);
            padding: 5px;
            margin-top: 3px;

            .maptable_li {
                width: 25%;
                overflow: hidden;
            }
        }

        .mapleft1 {
            display: flex;

            .pieChar {
                width: 100px;
                margin: 0px 20px 0 30px;
            }

            .mapleft1_sticit {
                color: white;
                font-family: DIN, DIN;
                font-weight: bold;
                font-size: 16px;
                line-height: 23px;
                text-align: left;
                font-style: normal;
                text-transform: none;

                .sticit_header {
                    text-align: center;
                    margin: 20px 0;


                    .header_num {
                        width: 22px;
                        text-align: center;
                        background-image: url(../imgUrl/maonum.png);
                        background-size: 100% 100%;
                        display: inline-block;
                        font-family: DIN, DIN;
                        font-weight: bold;
                        font-size: 14px;
                        line-height: 23px;
                        font-style: normal;
                        text-transform: none;
                    }
                }

                .sticit_number {
                    display: flex;
                    font-size: 10px;
                    margin-top: 10px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #00C8FF;
                    line-height: 21px;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;

                    .sticit_text {
                        margin-top: 5px;
                        padding-left: 20px;
                        font-size: 16px;
                    }

                    .sticit_number1 {
                        width: 66px;
                        height: 66px;
                        background-image: url(../imgUrl/mapnumbule.png);
                        background-size: 100% 100%;
                        margin-left: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-family: DINPro, DINPro;
                        font-weight: bold;
                        font-size: 40px;

                        line-height: 41px;
                        text-align: right;
                        font-style: normal;
                        text-transform: none;
                    }

                    .sticit_number2 {
                        width: 66px;
                        height: 66px;
                        background-image: url(../imgUrl/mapNumred.png);
                        background-size: 100% 100%;
                        display: flex;
                        margin-left: 20px;
                        justify-content: center;
                        align-items: center;
                        font-family: DINPro, DINPro;
                        font-weight: bold;
                        font-size: 40px;

                        line-height: 41px;
                        text-align: right;
                        font-style: normal;
                        text-transform: none;
                    }

                    .sticit_number3 {
                        width: 66px;
                        height: 66px;
                        background-image: url(../imgUrl/mapnumgary.png);
                        background-size: 100% 100%;
                        margin-left: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-family: DINPro, DINPro;
                        font-weight: bold;
                        font-size: 40px;

                        line-height: 41px;
                        text-align: right;
                        font-style: normal;
                        text-transform: none;
                    }

                }

            }
        }
    }
}


.map_center_right {
    display: flex;

    .mapRight {
        width: 33.5px;
    }

    .mapRight_card {
        width: 23vw;
        height: 24.5vh;
        background-image: url(../imgUrl/mapcard.png);
        background-size: 100% 100%;
        margin-bottom: 20px;

        .mapRight_cardFlex {
            display: flex;
            margin-top: 42px;
            padding-left: 25px;

            .cardFlex_img {
                width: 120px;
                height: 100px;
                background-image: url(../imgUrl/maprightbj.png);
                background-size: 100% 100%;
                margin-left: 10px;
                color: white;


                .cardFlex_text {
                    font-family: Afacad, Afacad;
                    font-weight: 400;
                    font-size: 17px;
                    color: #00C2FF;
                    line-height: 25px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    padding: 6px;
                }

                .cardFlex_num {
                    font-family: Afacad, Afacad;
                    font-weight: 400;
                    font-size: 24px;
                    color: #FFFFFF;
                    line-height: 25px;
                    letter-spacing: 1px;
                    text-shadow: 0px 0px 5px #0075FF;
                    text-align: right;
                    font-style: normal;
                    text-transform: none;
                    padding: 12px 15px;
                }
            }
        }
    }
}

.maptitle {
    margin-left: 51px;
    padding-top: 7px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 20px;
    text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
    text-align: left;
    font-style: normal;
    text-transform: none;
    color: white;

}

::v-deep .amap-marker-label {
    background-color: transparent;
    border: none;
}

::v-deep .el-dialog {
    background-color: transparent;
}
</style>